<template>
  <div class="login-page">
    <!-- 左侧动画区域 -->
    <div class="scene-container">
      <div class="scene-content">
        <div class="ocean-scene">
          <div class="sun"></div>
          <div class="clouds">
            <div class="cloud cloud1"></div>
            <div class="cloud cloud2"></div>
            <div class="cloud cloud3"></div>
          </div>
          <div class="ocean">
            <div class="boat">
              <div class="sail"></div>
              <div class="hull"></div>
            </div>
            <div class="waves">
              <div class="wave wave1"></div>
              <div class="wave wave2"></div>
              <div class="wave wave3"></div>
              <div class="wave wave4"></div>
            </div>
          </div>
          <div class="birds">
            <div class="bird bird1"></div>
            <div class="bird bird2"></div>
          </div>
        </div>
        <div class="scene-text">
          <h1>海洋生态保护平台</h1>
          <p>让我们携手守护蔚蓝海洋</p>
          <div class="stats">
            <div class="stat-item">
              <span class="number">5000+</span>
              <span class="label">志愿者</span>
            </div>
            <div class="stat-item">
              <span class="number">200+</span>
              <span class="label">保护项目</span>
            </div>
            <div class="stat-item">
              <span class="number">50+</span>
              <span class="label">合作机构</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧登录区域 -->
    <div class="login-container">
      <div class="login-content">
        <div class="login-header">
          <div class="logo-wrapper">
            <img src="/images/logo.png" alt="Logo" class="logo">
          </div>
          <h2>欢迎回来</h2>
          <p>登录您的账号开始海洋保护之旅</p>
        </div>

        <el-form 
          ref="formRef"
          :model="loginForm"
          :rules="rules"
          class="login-form">
          <el-form-item prop="username">
            <el-input
              v-model="loginForm.username"
              placeholder="用户名">
              <template #prefix>
                <div class="custom-input-icon">
                  <el-icon><User /></el-icon>
                </div>
              </template>
            </el-input>
          </el-form-item>
          
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              type="password"
              show-password
              placeholder="密码"
              @keyup.enter="handleLogin">
              <template #prefix>
                <div class="custom-input-icon">
                  <el-icon><Lock /></el-icon>
                </div>
              </template>
            </el-input>
          </el-form-item>

          <div class="form-options">
            <el-checkbox v-model="rememberMe">
              <span class="remember-text">记住我</span>
            </el-checkbox>
            <a href="#" class="forget-link">忘记密码？</a>
          </div>

          <el-button 
            type="primary" 
            class="submit-btn"
            :loading="loading"
            @click="handleLogin">
            登录
          </el-button>

          <div class="social-login">
            <div class="divider">其他登录方式</div>
            <div class="social-buttons">
              <button class="social-btn wechat">
                <el-icon><ChatRound /></el-icon>
              </button>
              <button class="social-btn alipay">
                <el-icon><Money /></el-icon>
              </button>
            </div>
          </div>

          <div class="register-hint">
            还没有账号？ <router-link to="/register" class="register-link">立即注册</router-link>
          </div>
        </el-form>

        <div class="demo-accounts">
          <div class="demo-title">
            <el-icon><InfoFilled /></el-icon>
            <span>测试账号</span>
          </div>
          <div class="account-list">
            <div class="account-item">
              <span class="role">管理员</span>
              <span class="credentials">admin / 123456</span>
            </div>
            <div class="account-item">
              <span class="role">志愿者</span>
              <span class="credentials">volunteer / 123456</span>
            </div>
            <div class="account-item">
              <span class="role">组织</span>
              <span class="credentials">organization / 123456</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { 
  User, Lock, ChatRound, Money, InfoFilled 
} from '@element-plus/icons-vue'

const store = useStore()
const router = useRouter()
const route = useRoute()
const formRef = ref(null)
const loading = ref(false)
const rememberMe = ref(false)

const loginForm = reactive({
  username: '',
  password: ''
})

const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, message: '用户名长度至少为3个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度至少为6个字符', trigger: 'blur' }
  ]
}

const handleLogin = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    loading.value = true
    
    const response = await store.dispatch('login', loginForm)
    console.log('登录响应：', response)
    
    // 如果记住我，保存用户名
    if (rememberMe.value) {
      localStorage.setItem('rememberedUsername', loginForm.username)
    } else {
      localStorage.removeItem('rememberedUsername')
    }
    
    ElMessage.success('登录成功')
    
    // 确保数据存在
    if (!response || typeof response.role === 'undefined') {
      console.error('登录响应数据格式错误：', response)
      throw new Error('登录响应数据格式错误')
    }
    
    // 获取角色值
    const roleValue = response.role
    console.log('用户角色值：', roleValue)
    
    // 根据角色值进行跳转
    if (roleValue === 1) {
      await router.replace('/admin/dashboard')
    } else if (roleValue === 2) {
      await router.replace('/volunteer/home')
    } else if (roleValue === 3) {
      await router.replace('/organization/home')
    } else {
      await router.replace('/')
    }
  } catch (error) {
    console.error('登录错误：', error)
    ElMessage.error(error.response?.data?.message || error.message || '登录失败')
  } finally {
    loading.value = false
  }
}

// 页面加载时，如果之前记住了用户名，自动填充
const initRememberedUsername = () => {
  const rememberedUsername = localStorage.getItem('rememberedUsername')
  if (rememberedUsername) {
    loginForm.username = rememberedUsername
    rememberMe.value = true
  }
}

initRememberedUsername()
</script>

<style scoped lang="scss">
.login-page {
  display: flex;
  min-height: 100vh;
  background: #f5f7fa;
}

// 左侧场景
.scene-container {
  flex: 1;
  background: linear-gradient(135deg, #006994 0%, #003366 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  border-radius: 8px 0px 0px 8px;

  .scene-content {
    width: 100%;
    max-width: 600px;
    position: relative;
    z-index: 1;
  }
}

.ocean-scene {
  position: relative;
  height: 300px;
  margin-bottom: 60px;

  .sun {
    position: absolute;
    top: 40px;
    left: 10%;
    width: 80px;
    height: 80px;
    background: #ffd700;
    border-radius: 50%;
    box-shadow: 0 0 60px #ffd700;
    animation: glow 4s ease-in-out infinite;
  }

  .clouds {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;

    .cloud {
      position: absolute;
      background: rgba(255, 255, 255, 0.8);
      border-radius: 20px;
      animation: float 20s linear infinite;

      &::before,
      &::after {
        content: '';
        position: absolute;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 50%;
      }

      &.cloud1 {
        width: 100px;
        height: 30px;
        top: 20px;
        left: 20%;
        animation-delay: 0s;

        &::before {
          width: 35px;
          height: 35px;
          top: -20px;
          left: 15px;
        }

        &::after {
          width: 45px;
          height: 45px;
          top: -25px;
          left: 35px;
        }
      }

      &.cloud2 {
        width: 80px;
        height: 25px;
        top: 40px;
        left: 50%;
        animation-delay: -5s;

        &::before {
          width: 30px;
          height: 30px;
          top: -15px;
          left: 12px;
        }

        &::after {
          width: 35px;
          height: 35px;
          top: -20px;
          left: 30px;
        }
      }

      &.cloud3 {
        width: 120px;
        height: 35px;
        top: 30px;
        left: 70%;
        animation-delay: -10s;

        &::before {
          width: 40px;
          height: 40px;
          top: -25px;
          left: 20px;
        }

        &::after {
          width: 50px;
          height: 50px;
          top: -30px;
          left: 45px;
        }
      }
    }
  }

  .ocean {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(180deg, #2193b0 0%, #1c7a9c 100%);
    border-radius: 0 0 20px 20px;
    overflow: hidden;

    .boat {
      position: absolute;
      left: 30%;
      bottom: 60px;
      width: 100px;
      height: 100px;
      animation: boatFloat 4s ease-in-out infinite;

      .sail {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 60px;
        background: #fff;
        clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
      }

      .hull {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 20px;
        background: #8b4513;
        border-radius: 10px 10px 0 0;
      }
    }

    .waves {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;

      .wave {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 200%;
        height: 100%;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 88.7'%3E%3Cpath d='M800 56.9c-155.5 0-204.9-50-405.5-49.9-200 0-250 49.9-394.5 49.9v31.8h800v-.2-31.6z' fill='%23ffffff22'/%3E%3C/svg%3E");
        background-position: 0 bottom;
        transform-origin: center bottom;
        animation: wave 12s linear infinite;

        &.wave1 { opacity: 0.15; animation-duration: 12s; }
        &.wave2 { opacity: 0.1; animation-duration: 8s; }
        &.wave3 { opacity: 0.05; animation-duration: 6s; }
        &.wave4 { opacity: 0.025; animation-duration: 4s; }
      }
    }
  }

  .birds {
    position: absolute;
    top: 80px;
    width: 100%;

    .bird {
      position: absolute;
      width: 20px;
      height: 10px;
      background: transparent;
      
      &::before,
      &::after {
        content: '';
        position: absolute;
        width: 10px;
        height: 2px;
        background: #fff;
        transform-origin: right center;
        animation: wingFlap 0.8s ease-in-out infinite;
      }

      &::before {
        transform: rotate(-45deg);
      }

      &::after {
        transform: rotate(45deg);
      }

      &.bird1 {
        left: 20%;
        animation: birdFly1 20s linear infinite;
      }

      &.bird2 {
        left: 40%;
        top: 40px;
        animation: birdFly2 15s linear infinite;
      }
    }
  }
}

.scene-text {
  text-align: center;
  color: white;

  h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
  }

  p {
    font-size: 1.2em;
    margin-bottom: 40px;
    opacity: 0.9;
  }

  .stats {
    display: flex;
    justify-content: center;
    gap: 40px;

    .stat-item {
      text-align: center;

      .number {
        display: block;
        font-size: 2em;
        font-weight: 600;
        margin-bottom: 8px;
      }

      .label {
        font-size: 0.9em;
        opacity: 0.8;
      }
    }
  }
}

// 右侧登录
.login-container {
  width: 500px;
  background: white;
  padding: 40px;
  display: flex;
  align-items: center;
  border-radius: 0 8px 8px 0;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.05);

  .login-content {
    width: 100%;
  }
}

.login-header {
  text-align: center;
  margin-bottom: 40px;

  .logo-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    height: 80px;
  
  }
  .logo-wrapper img{
    border-radius: 8px;
    // 图片居中
    margin: 0 auto;
  }

  .logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
    display: block;
  }

  h2 {
    font-size: 28px;
    color: #2c3e50;
    margin-bottom: 10px;
  }

  p {
    color: #7f8c8d;
    font-size: 16px;
  }
}

.login-form {
  .el-form-item {
    margin-bottom: 24px;
  }

  :deep(.el-input__wrapper) {
    padding: 12px 16px;
    background: #f8fafc;
    border-radius: 12px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    box-shadow: none;

    &:hover {
      border-color: #e2e8f0;
    }

    &.is-focus {
      border-color: #006994;
      background: white;
    }

    .el-input__prefix {
      margin-right: 12px;
    }
  }

  .custom-input-icon {
    display: flex;
    align-items: center;
    color: #94a3b8;
    font-size: 18px;
  }
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;

  .remember-text {
    color: #64748b;
  }

  .forget-link {
    color: #006994;
    text-decoration: none;
    font-size: 14px;
    
    &:hover {
      text-decoration: underline;
    }
  }
}

.submit-btn {
  width: 100%;
  height: 48px;
  font-size: 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #006994 0%, #003366 100%);
  border: none;
  margin-bottom: 24px;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 105, 148, 0.2);
  }
}

.social-login {
  margin-bottom: 24px;

  .divider {
    text-align: center;
    position: relative;
    color: #94a3b8;
    font-size: 14px;
    margin-bottom: 20px;

    &::before,
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      width: 30%;
      height: 1px;
      background: #e2e8f0;
    }

    &::before { left: 0; }
    &::after { right: 0; }
  }

  .social-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;

    .social-btn {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      border: none;
      background: #f8fafc;
      color: #64748b;
      font-size: 20px;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;

      .el-icon {
        font-size: 24px;
      }

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      }

      &.wechat:hover {
        color: #07c160;
        background: #e6f7ef;
      }

      &.alipay:hover {
        color: #1677ff;
        background: #e6f4ff;
      }
    }
  }
}

.register-hint {
  text-align: center;
  color: #64748b;
  font-size: 14px;
  margin-bottom: 30px;

  .register-link {
    color: #006994;
    text-decoration: none;
    font-weight: 500;

    &:hover {
      text-decoration: underline;
    }
  }
}

.demo-accounts {
  background: #f8fafc;
  border-radius: 12px;
  padding: 20px;

  .demo-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #64748b;
    margin-bottom: 16px;
    font-size: 14px;

    .el-icon {
      color: #006994;
    }
  }

  .account-list {
    display: flex;
    flex-direction: column;
    gap: 12px;

    .account-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 12px;
      background: white;
      font-size: 14px;

      .role {
        color: #64748b;
      }

      .credentials {
        color: #2c3e50;
        font-family: monospace;
      }
    }
  }
}

// 动画
@keyframes glow {
  0%, 100% { box-shadow: 0 0 60px #ffd700; }
  50% { box-shadow: 0 0 100px #ffd700; }
}

@keyframes float {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

@keyframes wave {
  0% { transform: translateX(0) translateZ(0) scaleY(1); }
  50% { transform: translateX(-25%) translateZ(0) scaleY(0.8); }
  100% { transform: translateX(-50%) translateZ(0) scaleY(1); }
}

@keyframes boatFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

@keyframes wingFlap {
  0%, 100% { transform: rotate(-45deg); }
  50% { transform: rotate(-15deg); }
}

@keyframes birdFly1 {
  from { transform: translateX(-100vw); }
  to { transform: translateX(100vw); }
}

@keyframes birdFly2 {
  from { transform: translateX(-100vw) translateY(10px); }
  to { transform: translateX(100vw) translateY(-10px); }
}

// 响应式设计
@media (max-width: 1200px) {
  .scene-container {
    padding: 20px;
  }

  .scene-text {
    h1 {
      font-size: 2em;
    }
  }
}

@media (max-width: 992px) {
  .login-page {
    flex-direction: column;
  }

  .scene-container {
    min-height: 400px;
    border-radius: 0 0 8px 8px;
  }

  .login-container {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    border-radius: 8px 8px 0 0;
  }
}

@media (max-width: 576px) {
  .scene-container {
    padding: 15px;
  }

  .login-container {
    padding: 20px;
  }

  .scene-text {
    h1 {
      font-size: 1.5em;
    }

    .stats {
      gap: 20px;

      .stat-item .number {
        font-size: 1.5em;
      }
    }
  }
}
</style> 